3778 Fix delete dropdown propagation issue in ProjectListItem by adding event.stopPropagation #3790
Conversation
ivicac
commented
Dec 23, 2025
ivicac
commented
- 3778 client - Improve project deletion and workflow handling with query cancellation and conditional fetching
- 3778 client - Fix delete dropdown propagation issue in ProjectListItem by adding event.stopPropagation
…ry cancellation and conditional fetching
…m by adding event.stopPropagation
ivicac
changed the title
|
There was a problem hiding this comment.
Pull request overview
This PR addresses issue #3778 by improving project deletion handling and fixing a dropdown propagation issue. The changes ensure proper query cleanup when deleting projects and prevent unintended collapsible behavior when clicking dropdown menu items.
- Added query cancellation and removal for deleted projects to prevent stale data issues
- Fixed event propagation for the delete dropdown menu item to prevent triggering parent click handlers
- Implemented conditional workflow query fetching to avoid unnecessary API calls during project refetch operations
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| ProjectWorkflowList.tsx | Added queryEnabled prop to conditionally enable/disable workflow queries based on project refetch state |
| ProjectListItem.tsx | Added event.stopPropagation() to delete dropdown item and query cleanup logic for deleted projects |
| ProjectList.tsx | Added isRefetchingProjects prop to control workflow query execution during project list updates |
| Projects.tsx | Moved queryClient initialization earlier and added isRefetchingProjects calculation to detect ongoing query operations |
| useSettingsMenu.ts | Added query cancellation and removal logic for project deletion to maintain consistency with ProjectListItem |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const {data: workflows, isLoading: isProjectWorkflowsLoading} = useGetProjectWorkflowsQuery( | ||
| project.id!, | ||
| !!project.id | ||
| queryEnabled && !!project.id |
There was a problem hiding this comment.
The logic queryEnabled && !!project.id will evaluate to undefined (falsy) when queryEnabled is undefined, which would disable the query by default. This is problematic because the prop is optional (queryEnabled?: boolean), meaning if this component is used elsewhere without explicitly passing this prop, the query would be unexpectedly disabled.
Consider using a default value to make the behavior more predictable. The condition should be (queryEnabled ?? true) && !!project.id or set a default parameter value in the function signature.
| queryEnabled && !!project.id | |
| (queryEnabled ?? true) && !!project.id |
| onClick={(event: MouseEvent) => { | ||
| setShowDeleteDialog(true); | ||
|
|
||
| event.stopPropagation(); | ||
| }} |
There was a problem hiding this comment.
The Delete dropdown menu item now includes event.stopPropagation(), but other dropdown menu items in the same menu (Publish, Edit, Duplicate, View Workflows, Share, Export, Pull Project from Git, Git Configuration) do not. While the handleProjectListItemClick function checks for .dropdown-menu-item selector to prevent propagation, this creates an inconsistency in how events are handled.
For consistency and clarity, either all dropdown menu items should call stopPropagation(), or none should (relying only on the selector-based check in handleProjectListItemClick). If there's a specific issue with the Delete button that required this fix, the same issue likely affects other menu items as well.
